<template>
  <view>
    <navbar></navbar>
    <view class="container">
		<image class="code_img" src="../../../static/images/invit/code.png" mode=""></image>
		<view class="qrcode-wrap">
			<!-- <lc-icon class="download-btn" type="download"></lc-icon> -->
			<view class="canvas-wrap">
				<canvas
					canvas-id="shareImg"
					id="shareImg"
					:style="`width:${canvasWidth}rpx;height:${canvasHeight}rpx;`"
				></canvas>
			</view>
			<image
				class="poster-img"
				:src="posterImage"
				mode="aspectFill"
				:style="`height:${canvasHeight}rpx;width:${canvasWidth}rpx;`"
				@load="handlePosterLoad"
			/>
			
		</view>
		<view class="qrcode-wrap" v-if="inviteShow">
			海报生成失败，请复制邀请链接进行邀请。
		</view>
		<view class="btn-copy"@tap.stop.prevent="copyData" :data-content="invite_url">
			<view class="left">
				复制链接
			</view>
			<view class="right">
				保存图片
			</view>
		</view>
      <!-- <view class="invite-code-box">
	  <view class="invate-code">
	    <text class="label">我的专属邀请码</text>
	    <view>
	      <text class="code">{{invite_code}}</text>
	      <i class="dy-iconfont icon-copy" @tap.stop.prevent="copyData" :data-content="invite_code"></i>
	    </view>
	  </view>
        <view class="invate-code">
          <text class="label">我的专属邀请码</text>
          <view>
            <text class="code">{{invite_code}}</text>
            <i class="dy-iconfont icon-copy" @tap.stop.prevent="copyData" :data-content="invite_code"></i>
          </view>
        </view>
        <view class="invate-ewm">
          <image class="ewm" :src="invite_ewm"></image>
        </view>
        <view class="invate-link">
          <text class="label">我的邀请链接</text>
          <view class="link-input">
            <text class="link">{{invite_url}}</text>
            <i class="dy-iconfont icon-copy" @tap.stop.prevent="copyData" :data-content="invite_url"></i>
          </view>
        </view>
      </view> -->
      <view class="my-invite-entry" @tap.stop.prevent="goInviteUserRecord">
        <text class="label">我的邀请</text>
        <text class="content">{{invite_num}}</text>
      </view>
<!-- 	 <view class="my-invite-ranking" @tap.stop.prevent="goRanking">
	    <text class="label">邀请排行</text>
	  </view> -->
	  <view class="qrimg" style="position: fixed;top: -999rpx;">
	      <tki-qrcode
	      ref="qrcode"
	      :val="val"
	      :size="size"
	      :unit="unit"
	      :background="background"
	      :foreground="foreground"
	      :pdground="pdground"
	      :icon="icon"
	      :iconSize="iconsize"
	      :lv="lv" 
	      :onval="onval"
	      :loadMake="loadMake"
	      @result="qrR" />
	  </view>
    </view>
  </view>
</template>

<script>
	const app = getApp();
  import navbar from "@/components/navbar/navbar";

  	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
    components: {
      navbar,
	  tkiQrcode
    },
		data() {
			return {
				val: '', // 要生成的二维码值
				size: 120, // 二维码大小
				unit: 'px', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 2, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				userInfo:uni.getStorageSync('userInfo'),
				inviteShow: false,
				invite_code:'',//邀请码
				invite_ewm:'',//邀请码注册链接二维码
				invite_url:'',//邀请码注册链接链接,
				invite_num:'',//邀请数量
				isoff:false,
				
				posterImage: null,
				canvasWidth: 570, //海报宽570
				canvasHeight: 964,//海报长764
				qrcodeTempFileRes :'',
				qrCodeSrc: null,
				// goodsImg: require('@/static/haibao9.jpg'),
				goodsImg: 'https://qiniu.wiod.cn/haibao/haibao.jpg?time=' + new Date().getTime(),
				avatar: '@/static/logo.png'
			}
		},
		onShow(){
			this.getPageData();
		},
		created() {
			let _this = this
			uni.showToast({
				title: '海报生成中……',
				icon:'none'
			})
		},
		methods: {
			qrR(res) {
				// console.log(res)
				let _this = this
				this.src = res
				// this.src = this.convertBase64UrlToBlob(res);
				// console.log(this.src)
				uni.downloadFile({
					url: res,
					// url: "https://qiniu.wiod.cn/lc-verify/2.jpg",
					// url:'@/static/logo.png',
					success: qrcodeTempFileRes  => {
						console.log(qrcodeTempFileRes)
						_this.generateQrCode(qrcodeTempFileRes.tempFilePath)
					},
					fail: res=> {
						this.inviteShow = true
						uni.showToast({
							title: '海报生成失败，请复制邀请连接进行邀请',
							icon:'none'
						})
					}
				})
			},
			downLoadImg(qrcodeTempFileRes){
				uni.showLoading({
					title: '正在保存...',
					mask: true
				})
				// uni.saveFile({
				// 	tempFilePath:qrcodeTempFileRes
				// })
			},
			handlePosterLoad(e) {
				let detail = e.detail || {};
				const originWidth = detail.width;
				const originHeight = detail.height;
			},
			// 画海报
			generateQrCode(tempFilePath) {
				let _this = this
				let userInfo = uni.getStorageSync('userInfo');
				const ctx = uni.createCanvasContext('shareImg', this);
				// 第一层背景
				ctx.setFillStyle('#ffffff');
				ctx.fillRect(0, 0, this.px_to_rpx(this.canvasWidth), this.px_to_rpx(this.canvasHeight));
				ctx.restore();
			
				// //海报图
				ctx.drawImage(this.goodsImg, 0, 0, this.px_to_rpx(570), this.px_to_rpx(764));
				
				// 二维码
				console.log(tempFilePath)
				ctx.drawImage(tempFilePath, this.px_to_rpx(380),this.px_to_rpx(764+10), this.px_to_rpx(180), this.px_to_rpx(180));
			
				// 商品名称
				let name = 'king数字艺术';
				// if (names.length > 20) {
				// 	name = names.slice(0, 15) + '...';
				// } else {
				// 	name = names;
				// }
				ctx.setFillStyle('#000000');
				ctx.setFontSize(this.px_to_rpx(32));
				ctx.fillText(name, this.px_to_rpx(20), this.px_to_rpx(764+130));
				ctx.setFontSize(this.px_to_rpx(28));
			
				// 标签
				ctx.setFillStyle('#c32f2f');
				ctx.setFontSize(this.px_to_rpx(24));
				ctx.fillText('邀请好友实名得好礼', this.px_to_rpx(20), this.px_to_rpx(764+178));
				// 昵称
				ctx.setFillStyle('#000000');
				ctx.setFontSize(this.px_to_rpx(32));
				ctx.fillText(userInfo.nickName.slice(0, 4) + '...', this.px_to_rpx(100), this.px_to_rpx(764+60));
				// console.log(this.userInfo)
				//头像
				ctx.save();
				ctx.beginPath();
				ctx.arc(this.px_to_rpx(48), this.px_to_rpx(764+30), this.px_to_rpx(32), 0, Math.PI * 2, false);
				ctx.clip();
				ctx.drawImage(this.avatar, this.px_to_rpx(30), this.px_to_rpx(764+20), this.px_to_rpx(48), this.px_to_rpx(48));
			
				//绘制图
				ctx.restore();
				// ctx.draw();
				// setTimeout(() => {
				// 	this.posterImage = document.querySelector('#shareImg canvas').toDataURL();
				// 	uni.hideLoading();
				// }, 1000);
				ctx.draw(false, () => {
					// canvas画布转成图片并返回图片地址
					uni.canvasToTempFilePath(
						{
							canvasId: 'shareImg',
							// width: _this.px_to_rpx(570),
							// height: _this.px_to_rpx(764),
							// destWidth: 690,
							// destHeight: 1040,
							success: res => {
								// _this.canvasToTempFilePath = res.tempFilePath;
								// _this.showShareImg = true;
								_this.posterImage = res.tempFilePath;
								// uni.hideLoading();
								uni.showToast({
									title: '绘制成功'
								});
							},
							fail: err => {
								uni.showToast({
									title: '绘制失败'
								});
							},
							complete: () => {
								uni.hideLoading();
								uni.hideToast();
							}
						},
						this
					);
				});
			},
			px_to_rpx(e) {
				return (e / 2) * (uni.getSystemInfoSync().windowWidth / 375);
			},
			// 获取页面数据
			getPageData(){
				let _this = this
				app._get('inviter/basic', {}, res => {
					let data = res.data;
					this.invite_code = data.invite_code;
					this.invite_ewm = data.invite_url;
					this.invite_url = 'https://www.btcys.com/#/pages/login/register?invite_code='+data.invite_code;
					this.val = 'https://www.btcys.com/#/pages/login/register?invite_code='+data.invite_code;
					// http://app.liangcang.online/h5/pages/user/invite/index
					this.invite_num = data.invite_num;
				}, null, () => {
					console.log(_this.src)
					
					uni.hideLoading();
				});
			},
			//跳转到我的邀请记录
			goInviteUserRecord(){
				uni.navigateTo({
					url: './list'
				});
			},
			goRanking(){
				uni.navigateTo({
					url: './ranking'
				});
			},
			// 复制数据
			copyData: function(e) {
				console.log(e)
				uni.setClipboardData({
					data: e.currentTarget.dataset.content
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.container{
	// box-sizing: border-box;
	// min-height: 100vh;
	padding:110rpx 50rpx 40rpx 50rpx;
	background:  #000 url('@/static/images/invit/bg.png') 100% no-repeat;
	// background:  #000;
	// background-size: 710rpx 512rpx;
}
.qrcode-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 48rpx;
	border-radius: 16rpx;
	overflow: hidden;
	padding-bottom: 32rpx;
	color: #fff;
	}
	image{
		-webkit-touch-callout:default；
	}
	.qrcode-wrap .poster-img{
		width: 100%;
	}
	.qrcode-wrap .canvas-wrap {
		// height: 0rpx;
		overflow: hidden;
	}
	.qrcode-wrap #shareImg {
		width: 1140rpx;
		height: 1572rpx;
	}
.invite-code-box{
	margin-bottom: 62rpx;
	padding: 80rpx 38rpx 90rpx 38rpx;
	border-radius: 30rpx;
	background: #fff;
}
.invate-code{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 70rpx;
	padding:0 30rpx;
}
.invate-code .label{
	font-size: 32rpx;
	font-weight: bold;
	color: $uni-text-color;
}
.invate-code .code{
	font-size: 32rpx;
	font-weight: bold;
	color: $uni-text-color-main;
}
.invate-ewm{
	margin:0 auto 64rpx;
	width: 276rpx;
	height: 276rpx;
	background: #f1f1f1;
}
.invate-ewm .ewm{
	width: 276rpx;
	height: 276rpx;
}
.invate-link{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.invate-link .label{
	flex-shrink: 0;
	margin-right: 40rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: $uni-text-color;
}
.container .btn-copy {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	width: 80%;
	height: 100rpx;
	background: url('@/static/images/invit/box.png') 50% no-repeat;;
	border-radius: 25rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #FFF;
	line-height: 100rpx;
	text-align: center;
	.left{
		margin: 0 auto;
	}
	.right{
		margin: 0 auto;
	}
	.img{
		width: 80rpx;
		height: 80rpx;
	}
}
.invate-link .link-input{
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	flex-grow: 0;
	padding:0 18rpx;
	width: 406rpx;
	height: 48rpx;
	background: #F7F7F9;
	border-radius: 15rpx;
}
.invate-link .link-input .link{
	font-size: 24rpx;
	color: $uni-text-color;
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.invate-link .link-input .icon-copy{
	margin-left: 60rpx;
	font-size: 24rpx;
	color: #C2C9D1;
	flex-shrink: 0;
}
.invite-code-box .invate-code .icon-copy{
	margin-left: 25rpx;
	font-size: 28rpx;
	color: $uni-text-color-grey;
}
.my-invite-entry{
	position: absolute;
	right: 0;
	top: 200rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 55rpx 0 38rpx;
	height: 70rpx;
	background: #fff;
	border-radius: 28rpx 0 0 28rpx;
}
.my-invite-ranking{
	position: absolute;
	right: 0;
	top: 280rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 55rpx 0 38rpx;
	height: 70rpx;
	background: #fff;
	border-radius: 28rpx 0 0 28rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: $uni-text-color;
}
.my-invite-entry .label{
	font-size: 28rpx;
	font-weight: 400;
	color: $uni-text-color;
}
.my-invite-entry .content{
	font-size: 28rpx;
	font-weight: 400;
	color: $uni-text-color-grey;
}
.my-invite-entry:after{
	content: '\e601'!important;
	font-family: 'dy-iconfont';
	color: $uni-text-color-grey;
	font-size: 36rpx;
	position: absolute;
	top: 50%;
	right: 20rpx;
	transform: translateY(-50%);
}
	.code_img{
		width: 100%;
		height: 300rpx;
		
	}
</style>

